<template>
  <div class="me">
    <!-- 头部,头像昵称 -->
    <div class="header">
      <div class="avatar">
        <img src="../assets/imgs/me/avatar/10.jpg" alt="" />
      </div>
      <div class="nickname">
        <p>小肥子</p>
        <p>17344574538</p>
      </div>
    </div>
    <!-- 优惠券 -->
    <div class="card">
      <ul>
        <li>
          <img src="../assets/imgs/me/icon/32_coupon.png" alt="" />
          <div>优惠券</div>
        </li>
        <li>
          <img src="../assets/imgs/me/icon/32_hongbao.png" alt="" />
          <div>红包</div>
        </li>
        <li>
          <img src="../assets/imgs/me/icon/32_card.png" alt="" />
          <div>卡券</div>
        </li>
        <li>
          <img src="../assets/imgs/me/icon/32_vip.png" alt="" />
          <div>会员中心</div>
        </li>
      </ul>
    </div>
    <!-- 订单 -->
    <div class="order">
      <ul>
        <li>
          <img src="../assets/imgs/me/icon/32_waiting.png" alt="" />
          <div>待付款</div>
        </li>
        <li>
          <img src="../assets/imgs/me/icon/32_send.png" alt="" />
          <div>待发货</div>
        </li>
        <li>
          <img src="../assets/imgs/me/icon/32_receive.png" alt="" />
          <div>待收货</div>
        </li>
        <li class="allOrder">
          <img src="../assets/imgs/me/icon/32_allList.png" alt="" />
          <div>全部订单</div>
        </li>
      </ul>
    </div>
    <!-- 我的服务 -->
    <div class="my">
      <div class="service">
        <span>我的服务</span>
        <div>查看更多</div>
      </div>
      <div class="my-spec">
        <div>
          <img src="../assets/imgs/me/service/network.png" alt="" />
          <p>服务网点</p>
        </div>
        <div>
          <img src="../assets/imgs/me/service/afterSale.png" alt="" />
          <p>售后服务</p>
        </div>
        <div>
          <img src="../assets/imgs/me/service/chance.png" alt="" />
          <p>以旧换新</p>
        </div>
        <div>
          <img src="../assets/imgs/me/service/online.png" alt="" />
          <p>在线客服</p>
        </div>
        <div>
          <img src="../assets/imgs/me/service/address.png" alt="" />
          <p>收货地址</p>
        </div>
        <div>
          <img src="../assets/imgs/me/service/about.png" alt="" />
          <p>关于我们</p>
        </div>
      </div>
    </div>
    <!-- 为你推荐 -->
      <div class="recomText">
        <div>为你推荐</div>
      </div>
    <!-- 底部选项卡开始 -->
    <Tabbar :selected="tab"></Tabbar>
    <!-- 底部选项卡结束 -->
  </div>
</template>
<script>
import Tabbar from "../components/childs/tabbar";
export default {
  components: {
    Tabbar,
  },
  data() {
    return {
      tab: "me",
    };
  },
};
</script>

<style scoped>
.me {
  font-size: 14px;
  width: 100%;
}
.header {
  padding: 0.4rem;
  display: flex;
  align-items: center;
  background-color: #26a2ff;
}
.avatar {
  flex-basis: 20%;
  text-align: center;
  margin-right: 0.2rem;
  margin-left: 0.1rem;
}
.avatar img {
  width: 1.5rem;
  border-radius: 50%;
}
.nickname p {
  margin: 0.2rem 0;
  padding: 0;
  color: #fff;
}
.nickname p:first-child {
  font-size: 0.4rem;
}
.card {
  background-color: #26a2ff;
  margin: 0;
}
.card ul {
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
  color: #fff;
  text-align: center;
}
/* 订单 */
.order {
  margin: 0 0.2rem;
  box-shadow: 0 0 5px #e8e8e8;
}
.order ul {
  display: flex;
  list-style: none;
  justify-content: space-around;
  padding: 0.3rem 0;
  text-align: center;
  /* margin-top: 0; */
}
.allOrder {
  box-shadow: -8px 0 10px -4px #e9e9e9;
  padding: 0.3rem;
  padding-top: 0;
}
/* 我的服务 */
.service {
  display: flex;
  font-size: 0.3rem;
  margin: 0 0.3rem;
  justify-content: space-between;
}
.service span {
  font-size: 0.4rem;
}
.service div {
  width: 1.5rem;
  background: url("../assets/imgs/cart/icon_arrow_right.png") no-repeat right center;
  background-position: 1.2rem 0rem;
}
.my-spec {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  box-shadow: 0 0 5px #e8e8e8;
  margin: 0.25rem 0.25rem;
}
.my-spec div {
  flex-basis: 24%;
  text-align: center;
  padding: 0.2rem;
}
.my-spec div p {
  margin: 0;
  padding: 0;
}
/* 为你推荐 */
.recomText {
  font-size: 0.4rem;
  text-align: center;
  margin: 0.7rem 0 3rem;
  display: flex;
  justify-content: center;
}
.recomText div {
  width: 6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #e8e8e8;
}
</style>